<template>
  <div class="checkSheep">
    <div class="left">
      <div class="b1" v-for="(item, index) in navs" :key="item.id" :class="{ on: currentNav === index }">
        <div class="left_l" @click="handleCheckNav(index)">
          <img src="@/assets/img/check.png" alt="" class="bian" :class="{ on: currentNav === index }" />
          <div :class="{ on: currentNav === index }">
            <p>{{ item.name }}</p>
            <p>(5/10)</p>
          </div>
        </div>
        <div class="left_r">
          <van-checkbox @click="check1(item.check)" v-model="item.check" icon-size="18px" checked-color="#37B5B5"></van-checkbox>
        </div>
      </div>
    </div>
    <div class="cen">
      <div
        class="b1"
        style="padding-right: 0"
        v-for="(item, index) in navs2"
        :key="item.id"
        :class="{ on: currentNav2 === index }"
      >
        <div class="left_l" style="width: 75%" @click="handleCheckNav2(index)">
          <div :class="{ on: currentNav2 === index }">
            <p>{{ item.name }}</p>
            <p>({{ item.number }}/10)</p>
          </div>
        </div>
        <div class="left_r" style="width: 25%">
          <van-checkbox  @click="check2(item.check)" v-model="item.check" icon-size="18px" checked-color="#37B5B5"></van-checkbox>
        </div>
      </div>
    </div>
    <div class="right">
      <div
        class="info_item"
        :class="{ on: item.check }"
        v-for="(item, index) in sheeps"
        :key="item.id"
        @click="handleSingle(index)"
      >
        <img src="@/assets/img/gong.png" v-if="item.sex === 1" alt="" />
        <img src="@/assets/img/mu.png" v-else alt="" />
        <p>100455</p>
        <div>项圈号: 1028</div>
        <div>月龄：18</div>
      </div>
    </div>
    <div class="btn">确定（{{ totalNumber }}）</div>
  </div>
</template>

<script>
import { List, Checkbox, CheckboxGroup } from 'vant'
export default {
  components: {
    [List.name]: List,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup
  },
  name: 'CheckSheep',
  data() {
    return {
      navs: [
        { id: 1, name: '羊圈名称11', check: true },
        { id: 2, name: '羊圈名称22羊圈名称22羊圈名称22', check: false },
        { id: 3, name: '羊圈名称33', check: false },
        { id: 4, name: '羊圈名称44', check: false }
      ],
      navs2: [
        { id: 1, name: '羊圈名称55', number: 3, check: true },
        { id: 2, name: '羊圈名称66羊圈名称22羊圈名称22', number: 3, check: true },
        { id: 3, name: '羊圈名称77', number: 2, check: true },
        { id: 4, name: '羊圈名称88', number: 5, check: true }
      ],
      sheeps: [
        { id: 1, name: '100244', name2: '12245', age: '18月龄', sex: 1, check: true },
        { id: 2, name: '100244', name2: '12245', age: '18月龄', sex: 2, check: false },
        { id: 3, name: '100244', name2: '12245', age: '18月龄', sex: 2, check: true },
        { id: 4, name: '100244', name2: '12245', age: '18月龄', sex: 1, check: false }
      ],
      loading: true,
      finished: true,
      checkAll: false, // 是否全选
      currentNav: 0, // 当前选中侧边栏
      currentNav2: 0, // 当前选中中间栏
      totalNumber: 0 // 选中总数量
    }
  },
  mounted() {},
  methods: {
    // 选择耳标号
    handleCheckNo(id) {
      console.log(id)
    },
    // 侧边栏选择
    handleCheckNav(index) {
      this.currentNav = index
    },
    // 中间栏选择
    handleCheckNav2(index) {
      this.currentNav2 = index
    },
    // 右侧框选择
    handleSingle(index) {
      this.sheeps[index].check = !this.sheeps[index].check
    },
    // 一级 选中
    check1(check) {
      this.navs2.forEach(ele => {
        ele.check = check
      })
      this.sheeps.forEach(ele => {
        ele.check = check
      })
    },
    // 二级 选中
    check2(check) {
      this.sheeps.forEach(ele => {
        ele.check = check
      })
    },
    // 选择框
    handleCheckBox({ check }) {
      this.sheeps.forEach(ele => {
        ele.check = check
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.checkSheep {
  display: flex;
  height: calc(100vh - 50px);
  .left {
    width: 128px;
    height: 100%;
    overflow-y: auto;
  }
  .cen {
    width: 128px;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    padding: 0 12px;
    padding-right: 0;
    box-sizing: border-box;
    border-right: 1px solid #e7e7e7;
  }
  .right {
    width: calc(100vw - 256px);
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
  }
  .info_item.on {
    border: 1px solid #37b5b5;
    background: #f5fbfb;
  }
  .info_item {
    width: 100%;
    min-height: 84px;
    padding: 12px 10px 10px 10px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    border: 1px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 10px;
    border-radius: 6px;
    background: #ffffff;
    img {
      width: 20px;
      height: 20px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
    }
    p {
      text-align: center;
      font-size: 14px;
      color: #333333;
    }
    div {
      font-size: 12px;
      color: #999999;
    }
  }
  .b1 {
    display: flex;
    padding: 12px 0;
    padding-right: 10px;
    box-sizing: border-box;
    .left_l {
      width: 80%;
      display: flex;
      align-items: center;
      .bian {
        width: 8px;
        height: 14px;
        opacity: 0;
      }
      .bian.on {
        opacity: 1;
      }
      div {
        width: 76px;
        color: #999999;
        p {
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      div.on {
        color: #333333;
      }
    }
    .left_r {
      width: 20%;
    }
  }
  .b1.on {
    background-color: #fff;
  }
  .btn {
    width: 100%;
    height: 50px;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #37b5b5;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  }
}
</style>
